<template>
	<div class="view">
		<Form ref="etagEditForm" 
			:model="data.data" :rules="ruleValidate" :label-width="80">
	        <Form-item label="组名" style="width: 300px;">
	            <Input type="text" v-model="data.data.groupName" size="large"></Input>
	        </Form-item>
	        
	        <Form-item 
	        		:label="'属性 '+ (index + 1)" 
	        		v-for="(etName, index) in data.data.etNames"
	        		:prop="'etNames.' + index"
	        		:key="index"
	        		style="width: 375px;"
	        		:rules="{required: true, message: '属性' + (index + 1) +'不能为空', trigger: 'blur'}">
	        		<Row>
	                <Col span="18">
	                    <Input type="text" 
	                    		v-model="data.data.etNames[index]" 
	                    		size="large"
	                    		@on-enter="addEtag">
	                    </Input>
	                </Col>
	                <Col span="4" offset="1" v-if="index != 0">
	                    <Button type="ghost" @click="removeEtag(index)">删除</Button>
	                </Col>
	            </Row>
	        </Form-item>
	        
	        <Form-item>
	            <Row>
	                <Col span="12">
	                    <Button 
	                    		type="dashed" 
	                    		long 
	                    		@click="addEtag" 
	                    		icon="plus-round">
	                    		新增职位属性
	                    </Button>
	                </Col>
	            </Row>
	        </Form-item>
	        
	        <Form-item label="是否公司" v-if="data.type == 1">
	            <i-switch v-model="data.data.isCompany"></i-switch>
	        </Form-item>
	        
	        <Form-item label="是否敏感">
	            <i-switch v-model="data.data.isSensitive"></i-switch>
	        </Form-item>
	        
	        <Form-item 
	        		:label="data.data.isCompany? '公司名称' : '姓名'" 
	        		prop="name" 
	        		style="width: 300px;">
	            <Input type="text" v-model="data.data.name"></Input>
	        </Form-item>
	        
	        <Form-item 
	        		label="角色名称" 
	        		prop="name" 
	        		style="width: 300px;"
	        		v-if="data.type == 2">
	            <Input type="text" v-model="data.data.roleName"></Input>
	        </Form-item>
	        
	        <Form-item>
	            <Button 
	            		type="primary" 
	            		:loading="data.isSubmit" 
	            		@click="handleSubmit('etagEditForm')">新增</Button>
	            <Button type="ghost" 
	            		:disabled="data.isSubmit" 
	            		@click="handleReset('etagEditForm')" 
	            		style="margin-left: 8px">
	            		重置
	            </Button>
	        </Form-item>
	    </Form>
	</div>

</template>

<script>
	import {trim} from '@/libs/string-util.js';
	
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		mounted() {
		},
		methods: {
			addEtag: function() {
				var data = this.data.data;
				var len = data.etNames.length;
				if(data.etNames[len-1].length > 0) {
					data.etNames.push('');
				}
			},
			removeEtag : function(index) {
				var data = this.data.data;
				data.etNames.splice(index, 1);
			},
			handleSubmit (name) {
				var $this = this;
				var data = this.data.data;
               	data.groupName = trim(data.groupName);
               	data.name = trim(data.name);
               	for(var i=0; i<data.etNames.length; i++) {
               		data.etNames[i] = trim(data.etNames[i]);
               	}
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      	this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
		}
	}
</script>

<style scoped="scoped">
	.CEntityTagEdit {
		padding: 20px;
	}
</style>